<template>
    <div class="shop-cart-main">
        
            <header >
                <span class="tit" >
                    <span id="cartnum">购物车 ({{quantity}})</span>
                </span>   
                <div class="btns">  
                    <router-link ta="a" to="/mainPage" class="u-topbaridx" ></router-link>
                    <router-link ta="a" to="/login" class="u-topbarlogin">登录</router-link>
                    <!-- <a href="#" class="u-topbaridx" title="回首页"></a>  
                    <a href="#" class="u-topbarlogin">登录</a>  -->
                    <a href="#" class="dn u-topbaruser usr" title="个人中心"></a>   
                </div> 
            </header>

            <ShopDetail></ShopDetail>

            <footer>
                <div class="v-billbar-left">
                    <div class="v-checkbox">
                        <div class="v-checkbox-inner">
                            <img alt="" src="">                
                            <div style="margin-left: 8px;">全选</div>         
                        </div>
                    </div>
                </div>
                <div class="v-billbar-center">
                    <div class="v-billbar-price">
                        <div class="v-billbar-price-label">
                            总价<span>（不含税）</span>：
                        </div>
                        <div class="v-billbar-price-value">¥{{money}}</div>
                    </div>
                    <div class="v-billbar-fee">
                        <div class="v-billbar-fee-label">
                            预估税费：
                        </div>
                        <div class="v-billbar-fee-value">¥0</div>
                    </div>
                </div>
                <div class="v-billbar-right">
                    <div class="v-billbar-button ">结算({{quantity}})</div>
                </div>
            </footer>
        </div>



</template>

<script>
import ShopDetail from "pages/views/ShopCart/ShopDetail"
import {mapGetters} from  "vuex"

export default {

    components: {
        ShopDetail
        
    },
    computed: {

        money(){
        
            let localInfo =this.$store.getters["ShopCartInfo"]
            let money = 0 
            localInfo.map((item)=>{
                money += item.currentPrice*item.quantity
            })

            return money
        },
       quantity(){
            let localInfo =this.$store.getters["ShopCartInfo"]
            let quantity = 0
            localInfo.map((item)=>{
                quantity += item.quantity
            })
            return quantity
        }
    }
}
</script>

<style lang="stylus" scoped>
    .shop-cart-main
        height 100%
        // display flex
        // flex-direction column
        // justify-content space-between
        background #f0f0f0
        header
            position relative
            line-height .45rem
            height .45rem
            text-align center
            background-color #fff
            overflow hidden
            -webkit-transition height .4s
            -moz-transition height .4s
            transition height .4s
            border-bottom 1px solid #f0f0f0
            .tit
                font-size .18rem
                max-width 50%
                overflow hidden
                display inline-block
                white-space nowrap
                text-overflow ellipsis
    
            .btns
                position absolute
                right .15rem
                top 50%
                margin-top -0.12rem
                height .30rem
                line-height .30rem
                color #e31436
                a
                    display inline-block
                    margin-left .10rem
                    vertical-align middle
                    color inherit
                .u-topbaridx
                    display inline-block
                    margin-top .01rem
                    background url(//w.kl.126.net/goods/dist/m/img/producticon.b67ad86.png) no-repeat -0.4rem -0.05rem
                    background-size 2rem
                    height 0.22rem
                    width 0.24rem
                .u-topbarlogin
                    
                    width .38rem
                    line-height .10rem
                    padding .03rem .05rem
                    text-align center
                    border 1px solid
                    border-radius .03rem
                    font-size .10rem
                    margin-bottom .02rem
                .u-topbaruser
                    display none
        // section
        //     flex 1
        //     margin-bottom .6rem
        footer
            position fixed
            bottom 0
            left 0
            display flex
            height .5rem
            width 100%
            align-items center
            background-color #fff  

            .v-billbar-left
                font-size .12rem
                align-items center
                padding-left .1rem
                .v-checkbox-inner
                    display flex
                    align-items center
                    img
                        height .2rem
                        width .2rem
                    div
                        margin-left .08rem
            .v-billbar-center
                display flex
                flex 1
                flex-direction column
                align-items flex-end
                justify-content center
                padding-right .1rem
                .v-billbar-price
                    display flex
                    font-size .13rem
                    color #333
                    .v-billbar-price-label
                        span
                            font-size .11rem
                    .v-billbar-price-value
                        color #e31436
                        font-weight 700

                .v-billbar-fee
                    display flex
                    font-size .11rem
                    color #999            

            .v-billbar-right
                display flex
                align-items stretch
                .v-billbar-button
                    display flex
                    background-color #e31436
                    padding 0 .25rem
                    color #fff
                    font-size .15rem
                    height .5rem
                    align-items center



</style>